<template>
  <el-main
    class="image-main"
    v-loading="loading"
  >
    <!-- 图片列表 -->
    <div class="top p-3">
      <el-row :gutter="10">
        <el-col
          :span="6"
          :offset="0"
          v-for="(item, index) in list"
          :key="index"
        >
          <el-card
            shadow="hover"
            class="relative mb-3"
            :body-style="{ padding: 0 }"
            :class="{ 'border-blue-500': item.checked }"
          >
            <el-image
              :src="item.url"
              fit="cover"
              class="h-[150px]"
              style="width: 100%"
              :preview-src-list="[item.url]"
              :initial-index="0"
            >
            </el-image>
            <div class="image-title">{{ item.name }}</div>
            <div class="flex items-center justify-center p-2">
              <el-checkbox
                v-if="openChoose"
                v-model="item.checked"
                @change="handleChooseChange(item)"
              />

              <el-button
                type="primary"
                size="small"
                text
                @click="handleEdit(item)"
              >
                重命名
              </el-button>
              <el-popconfirm
                title="是否要删除该图片?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="handleDelete(item.id)"
              >
                <template #reference>
                  <el-button
                    type="primary"
                    size="small"
                    class="!m-0"
                    text
                  >
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 分页 -->
    <div class="bottom">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="currentPage"
        :page-size="limit"
        @current-change="getData"
      />
    </div>
  </el-main>

  <!-- 右侧抽屉图片上传 -->
  <el-drawer
    v-model="drawer"
    title="上传图片"
  >
    <UploadFile
      :data="{ image_class_id }"
      @success="handleUploadSuccess"
    />
  </el-drawer>
</template>

<script setup>
import { ref, computed } from "vue";

import { getImageList, updateImage, deleteImage } from "~/api/image.js";

import { showPrompt, toast } from "~/composables/util.js";

import UploadFile from "./UploadFile.vue";

// 当前页码
const currentPage = ref(1);
// 数据总条数
const total = ref(0);
//  每页显示多少条数据
const limit = ref(10);

const list = ref([]);
const loading = ref(false);
const image_class_id = ref(0);

const props = defineProps({
  openChoose: {
    // 为true 才会显示重命名按钮前面的多选框
    type: Boolean,
    default: false,
  },
  limit: {
    type: Number,
    default: 1,
  },
});

// 上传图片
let drawer = ref(false);

// 打开右侧上传图片的抽屉
const openUploadFile = () => (drawer.value = true);

// 获取数据
function getData(p = null) {
  // 获取的是页码
  console.log("current-change:", p);
  if (typeof p == "number") {
    currentPage.value = p;
  }
  loading.value = true;
  getImageList(image_class_id.value, currentPage.value) // 获取第一页
    .then((res) => {
      console.log("getImageList:", res);
      total.value = res.totalCount;
      list.value = res.list.map((o) => {
        o.checked = false;
        return o;
      });
    })
    .finally(() => {
      loading.value = false;
    });
}

// 根据分类ID重新重新加载图片列表
const loadData = (id) => {
  currentPage.value = 1;
  image_class_id.value = id;
  getData();
};

// 删除图片
const handleDelete = (id) => {
  loading.value = true;
  deleteImage([id])
    .then((res) => {
      toast("删除成功");
      getData();
    })
    .finally(() => {
      loading.value = false;
    });
};

// 重命名的方法
const handleEdit = (item) => {
  showPrompt("重命名", item.name).then(({ value }) => {
    console.log("重命名点击确认时：", value);
    loading.value = true;
    updateImage(item.id, value)
      .then((res) => {
        toast("修改成功");
        getData();
      })
      .finally(() => {
        loading.value = false;
      });
  });
};

// 选中的图片
const emit = defineEmits(["choose"]);
const checkedImage = computed(() => list.value.filter((o) => o.checked));
const handleChooseChange = (item) => {
  if (item.checked && checkedImage.value.length > props.limit) {
    item.checked = false;
    return toast(`最多只能选中${props.limit}张`, "error");
  }
  emit("choose", checkedImage.value);
};

defineExpose({
  loadData,
  openUploadFile,
});

// 上传成功回调
const handleUploadSuccess = () => {
  console.log("图片上传成功");
  drawer.value = false;
  // 获取第一页数据即可
  getData(1);
};
</script>

<style>
.image-main {
  position: relative;
}

.image-aside .top,
.image-main .top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50px;
  overflow-y: auto;
}

.image-aside .bottom,
.image-main .bottom {
  position: absolute;
  bottom: 0;
  height: 50px;
  left: 0;
  right: 0;
  @apply flex items-center justify-center;
}

.image-title {
  position: absolute;
  top: 122px;
  left: -1px;
  right: -1px;
  @apply text-sm truncate text-gray-100 bg-opacity-50 bg-gray-800 px-2 py-1;
}
</style>
